import React, { Component } from 'react';
import { routerRedux } from 'dva/router';
import { Flex, Stepper, Icon, Modal, Button, Toast } from 'antd-mobile';
import CanChangeScroll from '../../components/CanChangeScroll/CanChangeScroll';
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';

import { spec_all, spec_model } from "./SpecAll.less";

class SpecAll extends Component {
    constructor(props) {
        super(props);
        this.state={
            vsible: this.props.vsible,
        }
    }

    onChangeNum = (num) => {
        let { specGoodsStorage,restrictionNum} = this.props.spec;
        let max = parseInt(specGoodsStorage)==0||parseInt(specGoodsStorage)<parseInt(restrictionNum)?parseInt(specGoodsStorage):
            parseInt(restrictionNum);
        if(num == max){
            Toast.info("该规格商品购买数量已到最大!");
            this.props.dispatch({ type:'goodsDetail/save', data:{ buyCount:num } });
        }else {
            this.props.dispatch({ type:'goodsDetail/save', data:{ buyCount:num } });
        }
    }

    getSpec = (index, selectIndex, v, vv) => {
        this.props.dispatch({ type:'goodsDetail/getSpecEFF', index, selectIndex, v, obj:vv });
    }

    addCart = () => {
        this.props.dispatch({ type:'goodsDetail/addCartOrBuyEFF', obj:{ saveType: 0,activityType:this.props.goodsDetailInfo.activityType } });
        this.props.open(false);
        this.setState({vsible:false})
    }

    _gotoBuy = (isActivity,activityType,isOpenGroup) => {
        let { speAll={}, specName={}, spec, buyCount, image,goodsDetailInfo,smallGroupDetailList } = this.props;
        if(isActivity==1){
            if(activityType==110){
                this.props.dispatch({ type:'goodsDetail/joinGroupEFF', obj: { ruleId:spec.activityRuleId, groupId: isOpenGroup==0?smallGroupDetailList.num==smallGroupDetailList.joinNum ?"":smallGroupDetailList.id:"",isOpenGroup:isOpenGroup, specId: this.props.spec.specId,goodsId: this.props.goodsId } }).then(result=>{
                    if(result.code==200){
                        this.props.dispatch({ type:'goodsDetail/addCartOrBuyEFF', obj: { saveType:1,activityType:this.props.goodsDetailInfo.activityType, goodsId: this.props.goodsId, specId: this.props.spec.specId } });
                    }
                });
            }else{
                this.props.dispatch({ type:'goodsDetail/addCartOrBuyEFF', obj: { saveType:1,activityType:this.props.goodsDetailInfo.activityType, goodsId: this.props.goodsId, specId: this.props.spec.specId } });
            }
        }else{
            this.props.dispatch({ type:'goodsDetail/addCartOrBuyEFF', obj: { saveType:1, goodsId: this.props.goodsId, specId: this.props.spec.specId } });
        }

    }

    render() {
        let { speAll={}, specName={}, spec, buyCount, image,goodsDetailInfo,group } = this.props;
        let { vsible } = this.state;
        //console.log(this.props.vsible)
        //console.log(vsible)
        let { specGoodsPrice, specGoodsStorage, specGoodsSerial, specName: SpecName,activityType,isActivity,originalPrice ,restrictionNum} = spec;
        specName = typeof specName==="string" ? JSON.parse(specName) : specName;
        let specSelectArr = Object.values(speAll).map((v,i,a)=>{
            let rv =v.list.filter((vv,ii,aa)=>{
                return vv.isDefault!=-1
            });
            if(rv.length>0){
                return rv[0].spValueName
            }else {
                return ""
            }
        });
        specSelectArr.push(buyCount+"件");
        console.log(specGoodsStorage);

        return (
            <Flex className={spec_all} justify="between">
                <Flex className="select_spec" align="center" onClick={() => {
                        this.props.setShowAll();
                        this.setState({ vsible: true });
                    }}>
                    <Flex style={{flex:  1}}>
                        <div style={{ color:'#666', whiteSpace:"nowrap", marginRight:"0.2rem" }}>已选择</div>
                    <div className="text-overflow-hidden" onClick={() => {
                            this.props.setShowAll();
                            this.setState({ vsible: true });
                        }}>
                            {
                                specSelectArr.join(",")
                            }
                        </div>
                    </Flex>
                    <Icon type="right" style={{width:".3rem",height:".3rem"}} />
                </Flex>

                <Modal
                    popup
                    visible={this.props.vsible==true?this.props.vsible:vsible}
                    animationType="slide-up"
                    maskClosable={true}
                    className={spec_model}
                    onClose={() => { this.setState({ vsible: false }); this.props.open(false) }}
                    closable={true}
                >
                    <div className="sepc_title">
                        <div className="goods_img">
                            <NoLazyImg src={image} style={{ width:"100%", height:"100%", maxHeight:'1.6rem' }} />
                        </div>
                        {isActivity==0?<div style={{ color:"#ff0036" }}>￥{specGoodsPrice}</div>:
                        <Flex>
                            <div style={{marginLeft:"0",border:"1px solid #ff0036",color:"#ff0036",padding:"0 .05rem",marginRight:".1rem"}}>
                                {activityType==60?"限时抢购":activityType==100?"秒杀":activityType==110?"拼团":""}
                            </div>
                            <div style={{ marginLeft:"0",color:"#ff0036" }}>￥{specGoodsPrice}</div>
                            <div style={{ marginLeft:"0",color:"#999",textDecoration:"line-through",fontSize:".23rem" }}>￥{originalPrice}</div>
                        </Flex>
                        }
                        <div>商品编号：{specGoodsSerial}</div>
                    </div>

                    <CanChangeScroll wrapperId="goodsDetailWraperId" targetId="goodsDetailTargetId" className="spec_scroll">
                        <div className="sp_list">
                            {
                                Object.keys(speAll).map((v,i,a)=>{

                                    return (
                                        <div key={i}>
                                            <div className="spec_name">{v}</div>
                                            <Flex wrap="wrap">
                                                {
                                                    speAll[v].list.map((vv,ii,aa)=>{

                                                        return (
                                                            <div onClick={()=>{
                                                                if(vv.isDefault==-1){
                                                                    let selectIndex = speAll[v].list.findIndex((fv,fi,fa)=>{
                                                                        return fv.isDefault!=-1
                                                                    })
                                                                    this.getSpec(ii, selectIndex,v, vv);
                                                                }
                                                            }}
                                                                 style={ vv.isDefault != -1 ? { backgroundColor:"#ff0036", color:"#fff" } :{} }
                                                                 className="item" key={ii}
                                                            >
                                                                { vv.spValueName }
                                                            </div>
                                                        )
                                                    })
                                                }
                                            </Flex>
                                        </div>
                                    )
                                })
                            }
                        </div>

                        <Flex className="spec_storage" justify="between">
                            <Flex>
                                <div>数量</div>
                                <div className="storage">库存{ specGoodsStorage }件</div>
                            </Flex>
                            <Stepper
                                // style={{ width: '50%', minWidth: '2rem'}}
                                showNumber
                                step={1}
                                min={1}
                                max={parseInt(specGoodsStorage)==0||parseInt(specGoodsStorage)<parseInt(restrictionNum)?parseInt(specGoodsStorage):
                                    parseInt(restrictionNum)
                                }
                                size="small"
                                onChange={this.onChangeNum}
                              //  useTouch={true}
                               // onChange={(e)=>{ console.log(e) }}
                                value={ buyCount } />
                        </Flex>
                    </CanChangeScroll>


                    <Flex className="cart_buy_btn" direction="row" justify="center" style={{ height: "100%" }}>
                        {
                            this.props.isShowAll ?activityType==110?<Flex
                                    justify="center"
                                    direction="column"
                                    style={{  backgroundColor:'#FFE3E9',width:"100%",height:"1rem" }}
                                    // disabled={ specGoodsStorage == 0 || this.props.disabled }
                                    onClick={ ()=>{this._gotoBuy(0,activityType)} }
                                >
                                    <div style={{color:"#F93861",width:"100%",textAlign:"center",fontSize:".3rem"}}>
                                        ¥{originalPrice}
                                    </div>
                                    <div style={{color:"#F93861",width:"100%",textAlign:"center",fontSize:".3rem",marginTop:".1rem"}}>
                                        单独购买
                                    </div>
                                </Flex>:
                            <Button
                                style={{  backgroundColor:'#FF9402' }}
                                disabled={ specGoodsStorage == 0}
                                onClick={this.addCart}
                                type="primary">
                                加入购物车
                            </Button>
                            :
                            <Button
                                style={{width: '100%'}}
                                disabled={ specGoodsStorage == 0}
                                onClick={(e) => {
                                    console.log(this.props.buyType,group)
                                    e.preventDefault();
                                    return this.props.buyType == 1 ? this.addCart() :group==0? this._gotoBuy(0,activityType):group==1?this._gotoBuy(isActivity,activityType,1):group==3?this._gotoBuy(isActivity,activityType,0):this._gotoBuy(isActivity,activityType);
                                }}
                                type="primary">
                                确认
                            </Button>
                        }
                        {
                            this.props.isShowAll ?activityType==110? <Flex
                                    justify="center"
                                    direction="column"
                                    style={{  backgroundColor:'#FF0036',width:"100%",height:"1rem" }}
                                    // disabled={ specGoodsStorage == 0 || this.props.disabled}
                                    onClick={ ()=>{this._gotoBuy(isActivity,activityType,1)} } >
                                    <div style={{color:"#fff",width:"100%",textAlign:"center",fontSize:".3rem"}}>
                                        ¥{specGoodsPrice}
                                    </div>
                                    <div style={{color:"#fff",width:"100%",textAlign:"center",fontSize:".3rem",marginTop:".1rem"}}>
                                        发起拼团
                                    </div>
                                </Flex>:
                            <Button
                                disabled={ specGoodsStorage == 0}
                                onClick={() => ()=>{this._gotoBuy(isActivity,activityType)}}
                                type="primary">
                                立即购买
                            </Button> : ''
                        }


                    </Flex>
                </Modal>
            </Flex>
        );
    }
}

export default SpecAll;
